<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魂石计算</title>
    <style>
        #tooltip,
        #result {
            margin: 0 1em;
            padding: 1em;
            font-size: 1.5em;
        }

        #result span {
            display: block;
            margin: 1em 0;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/pure/2.0.5/pure.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(() => {
            const ds = $('.pure-form fieldset');
            const option = (select, stoneType) => {
                const ss = $(select).empty(), st = stoneType || $('input[name=stoneType]').val();
                const type = parseInt(ss.attr('_type')), index = parseInt(ss.attr('_index'));
                const scope = range[st][type];
                ss.append(`<option value="0">-----</option>`);
                for (let i = scope[0]; i <= scope[1]; i++) {
                    ss.append(`<option value="${i}">${i}%</option>`);
                }
            };
            const appendSelect = (parent, name, type, index) => {
                parent.append(`<div class="pure-control-group">
                    <label for="${name}">${name}:</label>
                    <select name="${name}" _type="${type}" _index="${index}"></select>
                    </div>`);
            };
            assault.forEach((v, i) => {
                appendSelect(ds, v, TYPE_A, i);
            });
            defensive.forEach((v, i) => {
                appendSelect(ds, v, TYPE_D, i);
            });
            $('input[name=stoneType]').change(e => {
                const v = $(e.target).val();
                $('select').each((_, o) => option(o, v));
            });
            const reset = () => $('select').each((_, o) => option(o));

            $('#btnCalc').click(() => {
                let total = 0;
                $('select').each((_, o) => {
                    const val = parseInt($(o).val()), type = parseInt($(o).attr('_type')), index = parseInt($(o).attr('_index'));
                    if (val > 0) {
                        total += score[type][index] * val;
                    }
                });
                const st = $('input[name=stoneType]').val();
                const r = estimate[st];
                let html = '总得分: ' + total + ', 品质: ';
                if (total <= r[0]) {
                    html += '一般';
                } else if (total <= r[1]) {
                    html += '不错';
                } else {
                    html += '优质';
                }
                $('#result').html(html);
            });
            $('#btnReset').click(reset);

            reset();
        });
    </script>
</head>

<body>
    <div>
        <div id="tooltip">
            根据TapTap天地劫手游板块的<a href="https://www.taptap.com/topic/17756669" target="_blank">帖子数据</a>制作
        </div>
        <form class="pure-form pure-form-aligned">
            <fieldset>
                <div class="pure-control-group">
                    <label for="stoneType">类型:</label>
                    <input type="radio" name="stoneType" value="T" checked>&nbsp;天&nbsp;&nbsp;
                    <input type="radio" name="stoneType" value="D">&nbsp;地&nbsp;&nbsp;
                    <input type="radio" name="stoneType" value="H">&nbsp;荒
                </div>
            </fieldset>
        </form>
        <div style="margin: 0 5em">
            <button id="btnCalc" class="pure-button">计算</button>
            <button id="btnReset" class="pure-button">重置</button>
        </div>
        <div id="result">
        </div>
    </div>
</body>
<script>
    const assault = ['攻击', '伤害', '穿透', '暴击'], defensive = ['气血', '物理免伤', '法术免伤', '物防', '法防', '反击伤害', '暴击抗性'];
    const TYPE_A = 0, TYPE_D = 1;
    const range = {
        T: [[4, 10], [2, 5]],
        D: [[2, 5], [4, 10]],
        H: [[3, 7], [3, 7]]
    };
    const score = [[11, 10, 6, 3], [7, 5, 5, 1, 1, 0, 0]];
    const estimate = {
        T: [109, 164],
        D: [92, 143],
        H: [96, 145]
    };
</script>

</html>